<template>
    <n-card hoverable @click="toCompanyDetail">
        <n-avatar round :size="48" :src="companyLogo" />
        <b class="company-name">{{ props.companySimple.name }}</b>
    </n-card>
</template>

<script setup>
import { defineProps, computed } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const props = defineProps({
    companySimple: {
        type: Object
    }
})

const companyLogo = computed(() => {
    return process.env.VUE_APP_SERVER + props.companySimple.logo
})

function toCompanyDetail() {
    router.push({path:`/company-info/${props.companySimple.id}`})
}
</script>
<style lang="scss" scoped>
    .company-name{
        font-weight: bold;
        padding-top: 20px;
    }
</style>